<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>致筑网 - 工程平台注册</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind主题 - 工程行业专属配色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0a3d62',      // 工程深蓝（专业可靠）
                        secondary: '#3c6382',    // 工程浅蓝（辅助色）
                        accent: '#60a3bc',       // 工程亮蓝（强调色）
                        neutral: {
                            100: '#f5f6fa',     // 表单背景色
                            200: '#dcdde1',     // 边框色
                            700: '#2f3640',     // 文本色
                            900: '#192a56',     // 标题色
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/40 focus:border-primary focus:outline-none transition-all duration-300;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 active:bg-primary/80 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98];
            }
            .card-shadow {
                @apply shadow-lg shadow-black/10 hover:shadow-xl hover:shadow-black/15 transition-all duration-500;
            }
            .scrollbar-thin {
                scrollbar-width: thin;
                scrollbar-color: theme('colors.neutral.200') transparent;
            }
            .scrollbar-thin::-webkit-scrollbar {
                width: 5px;
            }
            .scrollbar-thin::-webkit-scrollbar-thumb {
                @apply bg-neutral-200 rounded-full hover:bg-neutral-300 transition-colors;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-700 overflow-hidden">
<!-- 页面主容器 -->
<div class="flex flex-col md:flex-row min-h-screen max-h-screen">
    <!-- 左侧：品牌与服务介绍区 -->
    <div class="bg-primary text-white md:w-1/2 p-6 md:p-12 overflow-y-auto scrollbar-thin">
        <!-- 品牌标识 -->
        <div class="mb-10">
            <div class="flex items-center">
                <i class="fa fa-cubes text-3xl mr-3"></i>
                <h1 class="text-3xl font-bold">致筑网</h1>
            </div>
            <p class="text-white/80 mt-1">工程建设全流程数字化平台</p>
        </div>

        <!-- 主标题与介绍 -->
        <div class="mb-12">
            <h2 class="text-[clamp(1.7rem,5vw,2.8rem)] font-bold leading-tight mb-6">
                让每一个<br>
                工程建设更高效
            </h2>
            <div class="w-20 h-1 bg-accent my-6"></div>
            <p class="text-white/80 text-lg max-w-md">
                致筑网为建筑、市政、交通等工程领域提供数字化解决方案，
                连接项目各参与方，实现全流程信息化管理。
            </p>
        </div>

        <!-- 服务特色 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
            <div class="bg-white/10 p-5 rounded-lg backdrop-blur-sm">
                <div class="text-accent text-2xl mb-3">
                    <i class="fa fa-line-chart"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">工程进度管理</h3>
                <p class="text-white/70 text-sm">实时跟踪项目进度，智能预警关键节点</p>
            </div>
            <div class="bg-white/10 p-5 rounded-lg backdrop-blur-sm">
                <div class="text-accent text-2xl mb-3">
                    <i class="fa fa-files-o"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">文档协同管理</h3>
                <p class="text-white/70 text-sm">工程图纸与资料的云端存储与协同编辑</p>
            </div>
            <div class="bg-white/10 p-5 rounded-lg backdrop-blur-sm">
                <div class="text-accent text-2xl mb-3">
                    <i class="fa fa-users"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">团队协作平台</h3>
                <p class="text-white/70 text-sm">多方参与方高效沟通，任务分配与追踪</p>
            </div>
            <div class="bg-white/10 p-5 rounded-lg backdrop-blur-sm">
                <div class="text-accent text-2xl mb-3">
                    <i class="fa fa-shield"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">安全质量管理</h3>
                <p class="text-white/70 text-sm">隐患排查与质量验收的数字化管理</p>
            </div>
        </div>

        <!-- 工程案例展示 -->
        <div class="mb-12">
            <h3 class="text-xl font-semibold mb-4">成功案例</h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="rounded-lg overflow-hidden h-40 group relative">
                    <img src="https://picsum.photos/id/1031/600/400" alt="商业综合体项目" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <p class="p-3 text-white">商业综合体项目</p>
                    </div>
                </div>
                <div class="rounded-lg overflow-hidden h-40 group relative">
                    <img src="https://picsum.photos/id/1076/600/400" alt="市政道路工程" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <p class="p-3 text-white">市政道路工程</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部信息 -->
        <div class="mt-auto pt-8 text-white/60 text-sm">
            <p>© 2024 致筑网科技有限公司 版权所有</p>
            <p class="mt-1">全国服务热线：400-888-9999</p>
        </div>
    </div>

    <!-- 右侧：注册表单区 - 带工程背景图 -->
    <div class="md:w-1/2 overflow-y-auto scrollbar-thin relative">
        <!-- 工程相关背景图 - 建筑蓝图风格 -->
        <div class="absolute inset-0 z-0">
            <img src="https://picsum.photos/id/1061/1200/1600" alt="工程蓝图背景"
                 class="w-full h-full object-cover object-center">
            <!-- 背景遮罩 - 确保表单可读性 -->
            <div class="absolute inset-0 bg-white/85 backdrop-blur-[2px]"></div>
        </div>

        <!-- 表单容器 -->
        <div class="relative z-10 flex items-center justify-center p-6 md:p-12 min-h-full">
            <div class="w-full max-w-md">
                <!-- 表单卡片 -->
                <div class="bg-white/90 backdrop-blur-sm rounded-2xl p-6 md:p-8 card-shadow">
                    <!-- 表单标题 -->
                    <div class="mb-8 text-center">
                        <h2 class="text-2xl md:text-3xl font-bold text-neutral-900">账户注册</h2>
                        <p class="text-neutral-700 mt-2">加入致筑网，开启工程数字化之旅</p>
                    </div>

                    <!-- 注册表单 -->
                    <form id="registrationForm" class="space-y-5">
                        <!-- 账户类型选择 -->
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-2">账户类型</label>
                            <div class="grid grid-cols-2 gap-3">
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="accountType" value="personal" class="sr-only peer" checked>
                                    <div class="border border-neutral-200 rounded-lg p-4 text-center hover:border-primary transition-all peer-checked:border-primary peer-checked:bg-primary/5">
                                        <i class="fa fa-user text-primary text-xl mb-2"></i>
                                        <span class="block font-medium">个人用户</span>
                                        <span class="text-xs text-neutral-500">工程师/技术人员</span>
                                    </div>
                                    <div class="absolute top-2 right-2 w-4 h-4 rounded-full bg-primary text-white text-xs flex items-center justify-center peer-checked:flex hidden">
                                        <i class="fa fa-check"></i>
                                    </div>
                                </label>
                                <label class="relative cursor-pointer">
                                    <input type="radio" name="accountType" value="company" class="sr-only peer">
                                    <div class="border border-neutral-200 rounded-lg p-4 text-center hover:border-primary transition-all peer-checked:border-primary peer-checked:bg-primary/5">
                                        <i class="fa fa-building text-primary text-xl mb-2"></i>
                                        <span class="block font-medium">企业用户</span>
                                        <span class="text-xs text-neutral-500">施工/设计单位</span>
                                    </div>
                                    <div class="absolute top-2 right-2 w-4 h-4 rounded-full bg-primary text-white text-xs flex items-center justify-center peer-checked:flex hidden">
                                        <i class="fa fa-check"></i>
                                    </div>
                                </label>
                            </div>
                        </div>

                        <!-- 真实姓名 -->
                        <div>
                            <label for="fullName" class="block text-sm font-medium text-neutral-700 mb-1">真实姓名 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
                                        <i class="fa fa-id-card"></i>
                                    </span>
                                <input type="text" id="fullName"
                                       class="w-full pl-10 pr-4 py-2.5 border border-neutral-200 rounded-lg form-input-focus"
                                       placeholder="请输入您的真实姓名" required>
                                <p id="fullNameError" class="hidden text-red-500 text-xs mt-1">
                                    <i class="fa fa-exclamation-circle mr-1"></i> 请输入真实姓名
                                </p>
                            </div>
                        </div>

                        <!-- 用户名 -->
                        <div>
                            <label for="username" class="block text-sm font-medium text-neutral-700 mb-1">用户名 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
                                        <i class="fa fa-user"></i>
                                    </span>
                                <input type="text" id="username"
                                       class="w-full pl-10 pr-4 py-2.5 border border-neutral-200 rounded-lg form-input-focus"
                                       placeholder="设置登录用户名" required>
                                <p id="usernameError" class="hidden text-red-500 text-xs mt-1">
                                    <i class="fa fa-exclamation-circle mr-1"></i> 用户名已存在
                                </p>
                            </div>
                        </div>

                        <!-- 邮箱 -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-neutral-700 mb-1">电子邮箱 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
                                        <i class="fa fa-envelope"></i>
                                    </span>
                                <input type="email" id="email"
                                       class="w-full pl-10 pr-4 py-2.5 border border-neutral-200 rounded-lg form-input-focus"
                                       placeholder="your@email.com" required>
                                <p id="emailError" class="hidden text-red-500 text-xs mt-1">
                                    <i class="fa fa-exclamation-circle mr-1"></i> 邮箱格式不正确
                                </p>
                            </div>
                        </div>

                        <!-- 手机号码 -->
                        <div>
                            <label for="phone" class="block text-sm font-medium text-neutral-700 mb-1">手机号码 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
                                        <i class="fa fa-phone"></i>
                                    </span>
                                <input type="tel" id="phone"
                                       class="w-full pl-10 pr-4 py-2.5 border border-neutral-200 rounded-lg form-input-focus"
                                       placeholder="用于接收验证码" required>
                                <p id="phoneError" class="hidden text-red-500 text-xs mt-1">
                                    <i class="fa fa-exclamation-circle mr-1"></i> 手机号码格式不正确
                                </p>
                            </div>
                        </div>

                        <!-- 所属公司 -->
                        <div>
                            <label for="company" class="block text-sm font-medium text-neutral-700 mb-1">所属公司 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
                                        <i class="fa fa-building"></i>
                                    </span>
                                <input type="text" id="company"
                                       class="w-full pl-10 pr-4 py-2.5 border border-neutral-200 rounded-lg form-input-focus"
                                       placeholder="请输入公司全称" required>
                                <p id="companyError" class="hidden text-red-500 text-xs mt-1">
                                    <i class="fa fa-exclamation-circle mr-1"></i> 请输入公司名称
                                </p>
                            </div>
                        </div>

                        <!-- 地址 -->
                        <div>
                            <label for="address" class="block text-sm font-medium text-neutral-700 mb-1">公司地址 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
                                        <i class="fa fa-map-marker"></i>
                                    </span>
                                <input type="text" id="address"
                                       class="w-full pl-10 pr-4 py-2.5 border border-neutral-200 rounded-lg form-input-focus"
                                       placeholder="省/市/区/详细地址" required>
                                <p id="addressError" class="hidden text-red-500 text-xs mt-1">
                                    <i class="fa fa-exclamation-circle mr-1"></i> 请输入详细地址
                                </p>
                            </div>
                        </div>

                        <!-- 密码 -->
                        <div>
                            <label for="password" class="block text-sm font-medium text-neutral-700 mb-1">设置密码 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
                                        <i class="fa fa-lock"></i>
                                    </span>
                                <input type="password" id="password"
                                       class="w-full pl-10 pr-10 py-2.5 border border-neutral-200 rounded-lg form-input-focus"
                                       placeholder="至少8位，包含字母和数字" minlength="8" required>
                                <button type="button" id="togglePassword" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-primary transition-colors">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                                <p id="passwordError" class="hidden text-red-500 text-xs mt-1">
                                    <i class="fa fa-exclamation-circle mr-1"></i> 密码至少8位，包含字母和数字
                                </p>
                            </div>
                        </div>

                        <!-- 确认密码 -->
                        <div>
                            <label for="confirmPassword" class="block text-sm font-medium text-neutral-700 mb-1">确认密码 <span class="text-red-500">*</span></label>
                            <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500">
                                        <i class="fa fa-lock"></i>
                                    </span>
                                <input type="password" id="confirmPassword"
                                       class="w-full pl-10 pr-10 py-2.5 border border-neutral-200 rounded-lg form-input-focus"
                                       placeholder="再次输入密码" minlength="8" required>
                                <button type="button" id="toggleConfirmPassword" class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-primary transition-colors">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                                <p id="confirmPasswordError" class="hidden text-red-500 text-xs mt-1">
                                    <i class="fa fa-exclamation-circle mr-1"></i> 两次输入的密码不一致
                                </p>
                            </div>
                        </div>

                        <!-- 同意条款 -->
                        <div class="flex items-start">
                            <div class="flex items-center h-5 mt-1">
                                <input id="terms" type="checkbox" class="h-4 w-4 text-primary border-neutral-300 rounded focus:ring-primary/40" required>
                            </div>
                            <label for="terms" class="ml-2 text-sm text-neutral-700">
                                我已阅读并同意<a href="#" class="text-primary hover:underline">用户协议</a>和<a href="#" class="text-primary hover:underline">隐私政策</a>
                            </label>
                        </div>

                        <!-- 注册按钮 -->
                        <button type="submit" class="w-full py-3 rounded-lg btn-primary font-medium text-lg">
                            完成注册
                        </button>

                        <!-- 已有账号 -->
                        <div class="text-center text-sm">
                            已有账号？<a href="/temp/login" class="text-primary font-medium hover:underline">立即登录</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const passwordInput = document.getElementById('password');
        const confirmPasswordInput = document.getElementById('confirmPassword');
        const togglePasswordBtn = document.getElementById('togglePassword');
        const toggleConfirmPasswordBtn = document.getElementById('toggleConfirmPassword');
        const registrationForm = document.getElementById('registrationForm');

        // 错误提示元素
        const errorElements = {
            fullName: document.getElementById('fullNameError'),
            username: document.getElementById('usernameError'),
            email: document.getElementById('emailError'),
            phone: document.getElementById('phoneError'),
            company: document.getElementById('companyError'),
            address: document.getElementById('addressError'),
            password: document.getElementById('passwordError'),
            confirmPassword: document.getElementById('confirmPasswordError')
        };

        // 密码可见性切换
        togglePasswordBtn.addEventListener('click', function() {
            togglePasswordVisibility(passwordInput, this);
        });

        toggleConfirmPasswordBtn.addEventListener('click', function() {
            togglePasswordVisibility(confirmPasswordInput, this);
        });

        // 实时验证 - 邮箱
        document.getElementById('email').addEventListener('blur', function() {
            validateEmail(this.value);
        });

        // 实时验证 - 手机号
        document.getElementById('phone').addEventListener('blur', function() {
            validatePhone(this.value);
        });

        // 实时验证 - 密码
        passwordInput.addEventListener('blur', function() {
            validatePassword(this.value);
            validateConfirmPassword();
        });

        // 实时验证 - 确认密码
        confirmPasswordInput.addEventListener('input', validateConfirmPassword);
        confirmPasswordInput.addEventListener('blur', validateConfirmPassword);

        // 实时验证 - 必填字段
        ['fullName', 'company', 'address'].forEach(field => {
            document.getElementById(field).addEventListener('blur', function() {
                validateRequired(this.value, field);
            });
        });

        // 表单提交处理
        registrationForm.addEventListener('submit', function(e) {
            e.preventDefault();

            // 收集表单数据
            const formData = {
                fullName: document.getElementById('fullName').value.trim(),
                username: document.getElementById('username').value.trim(),
                email: document.getElementById('email').value.trim(),
                phone: document.getElementById('phone').value.trim(),
                company: document.getElementById('company').value.trim(),
                address: document.getElementById('address').value.trim(),
                password: passwordInput.value,
                accountType: document.querySelector('input[name="accountType"]:checked').value
            };

            // 全表单验证
            let isValid = true;

            if (!validateRequired(formData.fullName, 'fullName')) isValid = false;
            if (!validateEmail(formData.email)) isValid = false;
            if (!validatePhone(formData.phone)) isValid = false;
            if (!validateRequired(formData.company, 'company')) isValid = false;
            if (!validateRequired(formData.address, 'address')) isValid = false;
            if (!validatePassword(formData.password)) isValid = false;
            if (!validateConfirmPassword()) isValid = false;

            // 验证通过，提交表单
            if (isValid) {
                submitRegistration(formData);
            }
        });

        // ==============================================
        // 验证函数
        // ==============================================

        /**
         * 切换密码可见性
         */
        function togglePasswordVisibility(input, button) {
            const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
            input.setAttribute('type', type);

            // 切换图标
            const icon = button.querySelector('i');
            if (type === 'password') {
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }

        /**
         * 验证必填字段
         */
        function validateRequired(value, field) {
            if (!value.trim()) {
                showError(errorElements[field], getErrorMessage(field));
                return false;
            } else {
                hideError(errorElements[field]);
                return true;
            }
        }

        /**
         * 验证邮箱格式
         */
        function validateEmail(email) {
            const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!regex.test(email)) {
                showError(errorElements.email, '邮箱格式不正确');
                return false;
            } else {
                hideError(errorElements.email);
                return true;
            }
        }

        /**
         * 验证手机号格式
         */
        function validatePhone(phone) {
            const regex = /^1[3-9]\d{9}$/;
            if (!regex.test(phone)) {
                showError(errorElements.phone, '手机号码格式不正确');
                return false;
            } else {
                hideError(errorElements.phone);
                return true;
            }
        }

        /**
         * 验证密码强度
         */
        function validatePassword(password) {
            const regex = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/;
            if (!regex.test(password)) {
                showError(errorElements.password, '密码至少8位，包含字母和数字');
                return false;
            } else {
                hideError(errorElements.password);
                return true;
            }
        }

        /**
         * 验证确认密码
         */
        function validateConfirmPassword() {
            if (confirmPasswordInput.value !== passwordInput.value) {
                showError(errorElements.confirmPassword, '两次输入的密码不一致');
                return false;
            } else {
                hideError(errorElements.confirmPassword);
                return true;
            }
        }

        /**
         * 显示错误信息
         */
        function showError(element, message) {
            element.innerHTML = `<i class="fa fa-exclamation-circle mr-1"></i> ${message}`;
            element.classList.remove('hidden');

            // 添加错误样式
            const inputId = element.id.replace('Error', '');
            document.getElementById(inputId).classList.add('border-red-500');
        }

        /**
         * 隐藏错误信息
         */
        function hideError(element) {
            element.classList.add('hidden');

            // 移除错误样式
            const inputId = element.id.replace('Error', '');
            document.getElementById(inputId).classList.remove('border-red-500');
        }

        /**
         * 获取错误信息
         */
        function getErrorMessage(field) {
            const messages = {
                fullName: '请输入真实姓名',
                company: '请输入公司名称',
                address: '请输入详细地址'
            };
            return messages[field] || '此字段为必填项';
        }

        /**
         * 提交注册信息到后端
         */
        function submitRegistration(data) {
            // 显示加载状态
            const submitBtn = registrationForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 注册中...';

            // 模拟API调用
            console.log('提交注册数据:', data);

            // 实际项目中替换为真实API调用
            setTimeout(() => {
                // 模拟注册成功
                alert('注册成功！请登录系统');
                window.location.href = 'login.html';

                // 恢复按钮状态（实际成功后会跳转，此代码仅作演示）
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }, 1500);

            // 真实API调用示例
            /*
            fetch('/api/auth/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    alert('注册成功！请登录');
                    window.location.href = 'login.html';
                } else {
                    // 显示后端返回的错误
                    if (result.field && errorElements[result.field]) {
                        showError(errorElements[result.field], result.message);
                    } else {
                        alert(result.message || '注册失败，请重试');
                    }
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalText;
                }
            })
            .catch(error => {
                console.error('注册失败:', error);
                alert('网络错误，请稍后重试');
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            });
            */
        }
    });
</script>
</body>
</html>
